<template>
  <div class="search-bar">
    <input
      type="text"
      readonly
      placeholder="搜索超市商品"
      @click="gotosearch"
    />
  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  methods: {
    gotosearch () {
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  @include wh(100%, 98px);
  @include flex(row, center, center);
  @include border1px(bottom, #E2E2E2);
  background: #fff;
  flex-shrink: 0;
  input {
    @include wh(auto, 64px);
    flex: 1;
    margin: 0 30px;
    padding: 0 40px;
    border-radius: 64px;
    background: #F6F6F6;
    border: 0;
    outline: none;
  }
}
</style>
